<template>
	<view class="menu-calssify-wrap">
		<scroll-view class="menu-classify" :scroll-top="classifyScrollTop" scroll-y scroll-with-animation>
			<view class="menu-classify--block">
				<template v-for="(item, index) in classifyList">
					<view :class="classifyIdx===index?'box active':'box'" :key="item.id" @click="onClassify(item.id, index)">
						<image class="img" :src="item.col_font_new" lazy-load></image>
						<view class="name">{{item.name}}</view>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'MenuClassify',
		props: {
			// 分类滚动距顶高度
			classifyScrollTop: {
				type: Number
			},

			// 分类列表
			classifyList: {
				type: Array
			},

			// 分类索引
			classifyIdx: {
				type: Number
			}
		},
		data() {
			return {

			}
		},
		computed: {

		},
		methods: {
			// 点击分类
			onClassify(val, idx) {
				this.$emit('onClassify', {
					val,
					idx
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/styles/common.less';
	@import "./menu-classify.less";
</style>
